<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <link href="css/theme-classic-all.css" rel="stylesheet" />
    <script type="text/javascript" src="js/ext-all.js"></script>
    <script type="text/javascript">
        Ext.onReady(function() {
            Ext.define('MyPanel', {
                extend: 'Ext.panel.Panel', //该行继承自Panel，即继承Panel的所有属性和法
                width: 200,
                height: 200,
                margin: '20',
                bbar: [{
                    xtype: 'button',
                    text: '确定'
                }, {
                    xtype: 'button',
                    text: '取消'
                }],
                bodyStyle: {
                    color: 'red'
                },
                html: 'I\'m a Panel'
            });
            new MyPanel({
                renderTo: Ext.getBody()
            });
        });
    </script>
</head>

<body>

</body>

</html>